<template>
	<div>
		<el-backtop :bottom="80"></el-backtop>
		<el-container class="home-container">
			<!--头部布局-->
			<el-header>
				<div>
					<!-- <img src="../assets/logo.png" alt class="logo_img" /> -->
					<span>HIS医院管理系统</span>
				</div>
				<el-button type="info" @click="doLogout()">退出</el-button>
			</el-header>
			<el-container>
				<!--侧边布局-->
				<el-aside width="190px" style="background-color:#324157">
				<el-menu
				    class="el-menu"
				    :collapse="collapse"
				    background-color="#324157"
				    text-color="#bfcbd9"
				    active-text-color="#20a0ff"
				    unique-opened
				    router
				>
				    <template v-for="item in items">
				        <template v-if="item.subs">
				            <el-submenu :index="item.index" :key="item.index">
				                <template slot="title">
				                    <i :class="item.icon"></i>
				                    <span slot="title">{{ item.title }}</span>
				                </template>
				                <template v-for="subItem in item.subs">
				                    <el-submenu
				                        v-if="subItem.subs"
				                        :index="subItem.index"
				                        :key="subItem.index"
				                    >
				                        <template slot="title">{{ subItem.title }}</template>
				                        <el-menu-item
				                            v-for="(threeItem,i) in subItem.subs"
				                            :key="i"
				                            :index="threeItem.index"
				                        >{{ threeItem.title }}</el-menu-item>
				                    </el-submenu>
				                    <el-menu-item
				                        v-else
				                        :index="subItem.index"
				                        :key="subItem.index"
				                    >{{ subItem.title }}</el-menu-item>
				                </template>
				            </el-submenu>
				        </template>
				        <template v-else>
				            <el-menu-item :index="item.index" :key="item.index">
				                <i :class="item.icon"></i>
				                <span slot="title">{{ item.title }}</span>
				            </el-menu-item>
				        </template>
				    </template>
				</el-menu>
					
				</el-aside>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>


<script>
	export default {
		name: 'Index',
		data() {
			return {
				login_user: {},
				collapse: false,
				items: [
				    {
				        icon: 'el-icon-lx-home',
				        index: '/Main',
				        title: '首页'
				    },
				
				    {
				      icon: 'el-icon-lx-cascades',
				      index: '/register',
				      title: '门诊挂号收费',
				      subs: [
				        {
				          index: '/register',
				          title: '现场挂号'
				        },
				        {
				          index: '/charge',
				          title: '收费'
				        },
				        {
				          index: '/backNumber',
				          title: '退号'
				        }
				      ]
				    },
				
				    {
				      icon: 'el-icon-lx-cascades',
				      index: '/outpatient',
				      title: '门诊医生工作站',
				      subs: [
				        {
				          index: '/homePage',
				          title: '门诊病历首页'
				        },
				        {
				          index: '/examineApplication',
				          title: '检查申请'
				        },
				        {
				          index: '/outDiagnosis',
				          title: '门诊确诊'
				        },
						{
						  index: '/patientPrescription',
						  title: '成药处方'
						},
						{
						  index: '/treatmentOver',
						  title: '诊毕'
						},
				        {
				          index: '/expenseSearch',
				          title: '患者费用明细查询'
				        }
				      ]
				    },
					{
					  icon: 'el-icon-lx-cascades',
					  index: '/technology',
					  title: '门诊医技工作站',
					  subs: [
					    {
					      index: '/checkRegist',
					      title: '检查检验登记'
					    },
					    {
					      index: '/resultEntry',
					      title: '检查检验结果录入'
					    },
					    {
					      index: '/personalWorkload',
					      title: '个人工作量统计'
					    }
					  ]
					},
				
				    {
				      icon: 'el-icon-lx-cascades',
				      index: 'drugstore',
				      title: '门诊药房工作站',
				      subs: [
				        {
				          index: '/dispensing',
				          title: '门诊发药'
				        },
				        {
				          index: '/outDrugs',
				          title: '门诊退药'
				        },
				        {
				          index: '/catalog',
				          title: '药品目录管理'
				        }
				      ]
				    },
				
				    {
				      icon: 'el-icon-lx-cascades',
				      index: 'financial',
				      title: '门诊财务管理',
				      subs: [
				        {
				          index: '/costAccount',
				          title: '费用科目管理'
				        },
				        {
				          index: '/dailySettlement',
				          title: '门诊日结核对'
				        },
				        {
				          index: '/subjectsWorkload',
				          title: '门诊科目工作量统计'
				        }
				      ]
				    },
				 
				]

			}
		},
		mounted() {
			this.login_user = JSON.parse(localStorage.getItem('login_user'))
		},
		methods: {
			doLogout() {
				// let url='/LoginController';
				let url = '/logout';
				let param = 'act=logout';
				this.$axios.post(url, param)
					.then((resp) => {
						//从本地存储移除用户信息
						localStorage.removeItem('login_user');
						this.$router.push('/Login');
					})
					.catch((err) => {
						console.log('error=', err);
					})
			},
		}
	}
</script>

<style lang="less" scoped>
	.el-header {
		background-color: #373d41;
		display: flex;
		justify-content: space-between; // 左右贴边
		padding-left: 0%; // 左边界
		align-items: center; // 水平
		color: #fff;
		font-size: 20px;

		>div {
			//左侧div加布局
			display: flex;
			align-items: center;

			span {
				margin-left: 15px;
			}
		}
	}

	.el-aside {
		background-color: #333744;
		
		.el-menu {
			border-right: none; // 对其右边框
		}
	}

	.el-main {
		background-color: #eaedf1;
	}

	.home-container {
		height: 100%;
	}

	.logo_img {
		width: 20%;
		height: 100%;
	}

	.iconfont {
		margin-right: 10px;
	}

</style>
